<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
    <style>
      html,
      body {
        padding: 0px;
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      Cesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MzJiNzYwNC1lNjNkLTQxNTctOGRmMi1hYWI0YzdmNzU5NjciLCJpZCI6MTIwMjYwLCJpYXQiOjE2NzI4MjE1NTZ9.92plPvDAcuXNNGm2-NsbEMdODDP9bYVnmlNsAtUsD8g";
       
      const viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false,  // 动画播放控件
        timeline: false,  // 时间轴
      });

      //一、 cesium 核心的4个类 viewer scene entity dataSources

      //1、viewer cesium

      // 隐藏地球
      // viewer.scene.globe.show= false;
      // 设置图层
      // console.log(viewer.imgerLaters == viewer.scene.imgerLaters)

      //2、scene 场景设置（非常重要的类，是所有3D图形的容器,控制相机视口的移动，数据事件）
      // 相机视口设置
      // viewer.scene.camera.setView(
      //   {
      //     destination:Cesium.Cartesian3.fromDegrees(116.39,39.9,1500)
      //   }
      // )

      //3、entity 实体几何图形加载
      // const entity = viewer.entities.add({
      //   position:Cesium.Cartesian3.fromDegrees(116.39,39.91,400),
      //   point:{
      //     pixelSize:50,
      //     color:new Cesium.Color(0,1,0,1)
      //   }
      // })
      // viewer.trackedEntity  = entity; // 将摄像头设置到几何图形处

      //4、dataSources  加载外部数据 (CZML, KML, GeoJSON 格式数据)
      // viewer.dataSources.add(
      //   Cesium.GeoJsonDataSource.load('文件路径')
      // )

      // cesium 坐标转换 (地理坐标转换为屏幕坐标)
      // 1.WGS84弧度坐标系(Cartographic) new Cesium.Cartographic(经度,纬度,高度)
      // 2.笛卡尔空间坐标直角坐标系(Cartesian3) new Cesium.Cartesian3(x轴,y轴,z轴)
      // 2.平面(屏幕)坐标系、笛卡尔2D坐标系(Cartesian2) new Cesium.Cartesian3(x轴,y轴)


      //二、camera  Cesium相机系统，三种设置方法(setView flyTo lookAt viewBoundingSphere)
      // const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 2500.0);   // 设置飞行目的地的一个坐标

      // 1.serView 通过定义相机飞行目的地的三维坐标和视线方向将视角直角切换到所设置的视域范围内，视角是直接切换，没有空中飞行的过程，适用于快速切换视角
      //  viewer.camera.setView({
      //   destination:position, // 目的地位置
      //   orientation:{  // 设置相机视口的方向
      //     heading:Cesium.Math.toRadians(0),  // heading控制视口方向的水平旋转，也就是沿着Y轴旋转，当数值为0则代表是正北方向
      //     pitch:Cesium.Math.toRadians(-90),  // pitch控制视口的上下旋转，即沿X轴进行旋转，当数值为-90则是俯视朝向地面
      //     roll:0   // roll控制视口的翻转角度，即沿着Z轴进行旋转，当数值为0则表示不翻转
      //   }
      //  })

      // 2.flyTo具有空中飞行逐步切换视域的效果，可以设置飞行时间
      // viewer.camera.flyTo({
      //   destination: position, // 目的地位置
      //   orientation: {
      //     heading: Cesium.Math.toRadians(0),
      //     pitch: Cesium.Math.toRadians(-90),
      //     roll: 0,
      //   },
      //   duration: 5, // 设置飞行时间5秒
      // });

      // 3.lookAt一般用于锁定某个场景的视角，相机沿着目标点位旋转，不会改变视口位置,锁定位置视角
      // const center = Cesium.Cartesian3.fromDegrees(116.39, 39.9);  // 中心点位置
      // const heading = Cesium.Math.toRadians(50);
      // const pitch = Cesium.Math.toRadians(-90);
      // const range = 2500;
      // viewer.camera.lookAt(center,new Cesium.HeadingPitchRange(heading,pitch,range))
      
      // 4.viewBoundingSphere 当对一个物体进行多角度观测或者建筑物进行定点漫游时使用(飞机模型示例)
      const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 1500.0);
      const orientation = Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRoll(-90,0,0))  // 设置飞机模型的朝向，第一个参数是位置信息，第二参数是旋转角度信息(这里设置垂直旋转和翻转均为0，已到达飞行的效果)
      const entity = viewer.entities.add({
        position:position,
        orientation:orientation,
        model:{ // 存储模型的各种信息
          uri:'./model/Cesium_Air.glb',
          minimumPixelSize:100, // 设置模型最小情况下的大小
          maximumScale:10000, // 设置模型最大缩放的比例
          show:true,
        }
      });
      viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRoll(0,0,0))   // viewBoundingSphere第一个参数设置视点的位置(BoundingSphere的第一个参数设置相机，第二个但是设置相机距离)，viewBoundingSphere第二个参数设置相机的朝向

      // 地图中加载图片
        // const entity = viewer.entities.add({
        //   id:'planeLogo',
        //   position:new Cesium.Cartesian3.fromDegrees(116.39,39.91,0),
        //   plane:{
        //     plane:new Cesium.Plane(Cesium.Cartesian3.UNIT_Z,0.0),
        //     dimensions:new Cesium.Cartesian2(400,300),
        //     material:'./img/img1.png',
        //     outline:true,
        //     outlineColor:Cesium.Color.BLACK,
        //   },
        //   description:`<div>
        //     <img width='100%' height="300px" src="./img/img1.png">
        //     <h3>Cesium_test</h3>
        //     <h3>Cesium_test</h3>
        //     </div>`
        // })
    </script>
  </body>
</html>
